<template>
  <view class="pos-order-list" ref="container">
    <!-- #ifdef MP || APP-PLUS -->
    <NavBar titleText="售后订单" bagColor="#F5F5F5" :iconColor="iconColor" :textColor="iconColor"
            :isScrolling="isScrolling" showBack></NavBar>
    <!-- #endif -->

    <view class="list list-box" v-if="list.length">
      <view class="item" v-for="(item, index) in list" :key="index">
        <view class="order-num acea-row row-between-wrapper" @click="toDetail(item)">
          <view>
            <view>售后单号：{{ item.refundOrderNo }}</view>
          </view>
          <view class="state">{{ statusArr[item.refundStatus] }}</view>
        </view>
        <view class="pos-order-goods">
          <view class="goods acea-row" @click="toDetail(item)">
            <scroll-view class="picTxt scroll-view" scroll-x="true" v-if="item.infoResponseList && item.infoResponseList.length > 1">
              <view class="pictrue" v-for="(val, key) in item.infoResponseList" :key="key">
                <image :src="val.image"/>
              </view>
            </scroll-view>
            <view class="picTxt" v-else>
              <view class="acea-row" v-for="(val, key) in item.infoResponseList" :key="key">
                <view class="pictrue">
                  <image :src="val.image"/>
                </view>
                <view class="text info-text">
                  <view class="info line2">
                    {{ val.productName }}
                  </view>
                  <view class="attr">
                    {{ val.sku }}
                  </view>
                </view>
              </view>
            </view>
            <view class="money">
              <baseMoney color="#333333" :money="item.refundPrice" symbolSize="20" integerSize="32" decimalSize="20">
              </baseMoney>
              <view class="num">共{{ item.totalNum }}件</view>
            </view>
          </view>
        </view>
        <view class="operation acea-row row-between-wrapper">
          <view v-if="item.afterSalesType == 1" class="more acea-row row-middle">
            <text class="iconfont icon-ic_returnmoney"></text>
            仅退款
          </view>
          <view v-else-if="item.afterSalesType == 2 " class="more acea-row row-middle">
            <text class="iconfont icon-ic_returnofgoods"></text>
            退货退款
          </view>
          <view class="acea-row row-middle">
            <view class="btn" @click="modify(item, 7)">退款单备注</view>
            <view class="btn on" v-if="item.refundStatus==0&&(item.returnGoodsType==0||item.returnGoodsType==2)"
                  :class="openErp?'on':''" @click="modify(item,'2',1,0)">
              退款审核
            </view>
            <view class="btn on" v-if="item.refundStatus==0&&item.returnGoodsType==1" :class="openErp?'on':''"
                  @click="modify(item,'2',0,1)">
              退款审核
            </view>
            <view class="btn on" v-if="item.refundStatus==5" @click="modify(item, 2, 8,2)">确认收货</view>
          </view>
        </view>
      </view>
    </view>
    <emptyPage v-else title="暂无订单～" :imgSrc="urlDomain+'crmebimage/presets/nodingdan.png'"></emptyPage>
    <!-- <Loading :loaded="loaded" :loading="loading"></Loading> -->
    <PriceChange :change="change" :orderInfo="orderInfo" :isRefund="isRefund"
                 v-on:statusChange="statusChange($event)" v-on:closechange="changeclose($event)"
                 v-on:savePrice="savePrice"
                 :status="status"></PriceChange>
    <view class="mask" v-if="filterShow" @click="filterShow=!filterShow"></view>
    <!-- #ifdef H5 -->
    <view class="filter-popup" :class="{ on: filterShow }">
      <!-- #endif -->
      <!-- #ifndef H5 -->
      <view class="filter-popup" :class="{ on: filterShow }" :style="{
		top:getHeight.barTop+getHeight.barHeight+'px'}">
        <!-- #endif -->
        <view class="content">
          <view class="search acea-row row-middle">
            <text class="iconfont icon-ic_search"></text>
            <input class="inputs" placeholder='请输入要查询的退款单号' placeholder-class='placeholder'
                   confirm-type='search'
                   name="search" v-model="where.refundOrderNo" @confirm="searchSubmit"></input>
          </view>
          <view class="item">
            <view class="title">按下单时间</view>
            <view class="acea-row list">
              <view class="cell" v-for="(item, index) in dateList" :key="index"
                    :class="{ on: item.val == dateType }" @click="dateChange(item.val)">{{ item.label }}
              </view>
            </view>
          </view>
          <view class="bottom">
            <view class="no_view" @click="resetBtn">重置</view>
            <view class="yes_view" @click="submitBtn">确定</view>
          </view>
        </view>
      </view>
    </view>
</template>

<script>
import {
  refundOrderList,
  refundOrderMark,
  refundStatusNum,
  refundOrderAudit,
  refundReceiving,
  refundReceivingReject
} from '@/api/work.js'
import footerPage from '../components/footerPage/index.vue';
import Loading from '../components/Loading/index'
import PriceChange from '../components/PriceChange/index.vue'
import emptyPage from '@/components/emptyPage.vue'
import NavBar from '../components/NavBar.vue'
import baseMoney from '../components/BaseMoney.vue'
import {
  isMoney
} from '@/utils/validate.js';
import {
  HTTP_REQUEST_URL
} from '@/config/app';

export default {
  name: "AdminOrderList",
  components: {
    Loading,
    PriceChange,
    emptyPage,
    NavBar,
    footerPage,
    baseMoney
  },
  data() {
    return {
      urlDomain: this.$Cache.get("imgHost"),
      refundStatusNum: {},
      statusArr: ['待审核', '商家拒绝', '退款中', '已退款', '用户退货', '商家待收货', '已撤销'],
      getHeight: this.$util.getWXStatusHeight(),
      iconColor: '#333333',
      isScrolling: false,
      top: 0,
      navHeight: 0,
      isFixed: false,
      filterShow: false,
      openErp: false,
      current: "",
      change: false,
      types: 0,
      where: {
        page: 1,
        limit: 10,
        dateLimit: '',//事件区间
        orderNo: '',//订单号
        refundOrderNo: '',//退款订单号
        refundStatus: 9,//售后状态
      },
      list: [],
      loaded: false,
      loading: false,
      orderInfo: {},
      status: "",
      state: 9,
      isRefund: 0, //1是仅退款;0是退货退款
      imgHost: HTTP_REQUEST_URL,
      dateSelected: '',
      apiModalType: '',//0-仅退款 1-退货退款 2-确认收货
      dateList: [{
        label: '全部',
        val: '-1',
      }, {
        label: '近1个月',
        val: '0',
      },
        {
          label: '近3个月',
          val: '1',
        },
        {
          label: '近6个月',
          val: '2',
        },
      ],
      payList: [{
        label: '全部',
        val: '0',
      },
        {
          label: '仅退款',
          val: '1'
        },
        {
          label: '退货退款',
          val: '2'
        },
      ],
      isRefund_type: [{
        label: '否',
        val: '0',
      },
        {
          label: '是',
          val: '1'
        },
      ],
      dateType: '-1'
    };
  },
  onLoad(option) {
    this.state = option.type ? option.type : 9;
    this.where.refundStatus = option.type ? option.type : 9;
    this.where.orderNo = option.orderNo ? option.orderNo : '';
  },
  onShow() {
    this.init();
  },
  mounted() {
    const query = uni.createSelectorQuery().in(this);
    query.select("#nav").boundingClientRect((data) => {
      this.top = data ? data.top : 0;
      this.navHeight = data ? data.height : 0;
    }).exec();
  },
  onPageScroll(option) {
    // if (this.top >= option.scrollTop) {
    // 	this.isFixed = false;
    // } else {
    // 	this.isFixed = true;
    // }
  },
  methods: {
    getStatusNum() {
      refundStatusNum(this.where).then(res => {
        this.refundStatusNum = res.data
      })
    },
    statusChange(e) {
      this.status = e;
    },
    // 获取数据
    getIndex: function () {
      let that = this;
      if (that.loading || that.loaded) return;
      that.loading = true;
      let obj = refundOrderList(that.where);
      obj.then(
          res => {
            that.loading = false;
            that.loaded = res.data.list.length < that.where.limit;
            that.list.push.apply(that.list, res.data.list);
            that.where.page = that.where.page + 1;
          },
          err => {
            that.$util.Tips({
              title: err
            })
          }
      );
    },
    // 初始化
    init: function () {
      this.list = [];
      this.where.page = 1;
      this.loaded = false;
      this.loading = false;
      this.getIndex();
      this.current = "";
      this.getStatusNum()
    },
    searchSubmit() {
      this.init();
    },
    // 导航切换
    changeStatus(val) {
      if (this.state != val) {
        this.state = val;
        this.where.refundStatus = val;
        this.init();
      }
    },
    // 商品操作
    //0-仅退款 1-退货退款 2-确认收货 212
    modify: function (item, status, type, apiType) {
      this.apiModalType = apiType
      if (this.openErp && status != 1) return
      this.change = true;
      this.status = status.toString();
      this.orderInfo = item;
      if (status == 2) {
        this.isRefund = type
      }
    },
    changeclose: function (msg) {
      this.change = msg;
      this.orderInfo = {};
    },
    async savePrice(opt) {
      let that = this,
          data = {};
      data.refundOrderNo = that.orderInfo.refundOrderNo;
      if (that.apiModalType == 0) {
        if (opt.type == 2 && !opt.refuse_reason) {
          return this.$util.Tips({
            title: '请输入拒绝理由'
          })
        }
        let requestObj = {
          refundOrderNo: that.orderInfo.refundOrderNo,
          auditType: opt.type == 1 ? 'success' : 'refuse',
          reason: opt.refuse_reason ? opt.refuse_reason : ''
        }
        refundOrderAudit(requestObj).then(res => {
          if (res.code == 200) {
            this.$util.Tips({
              title: '审核成功'
            })
            this.init();
            this.change = false
          } else {
            this.$util.Tips({
              title: res.message
            })
          }
        })
      } else if (that.apiModalType == 1) {
        //退货退款审核
        if (opt.type == 2 && !opt.refuse_reason) {
          return this.$util.Tips({
            title: '请输入拒绝理由'
          })
        }
        if (opt.type == 1 && !opt.merAddressId) {
          return this.$util.Tips({
            title: '请选择退货地址'
          })
        }
        //退货退款拒绝
        if (opt.type == 2) {
          let requestObj = {
            refundOrderNo: that.orderInfo.refundOrderNo,
            auditType: opt.type == 1 ? 'success' : 'refuse',
            reason: opt.refuse_reason ? opt.refuse_reason : ''
          }
          refundOrderAudit(requestObj).then(res => {
            if (res.code == 200) {
              this.$util.Tips({
                title: '操作成功'
              })
              this.init();
              this.change = false
            } else {
              this.$util.Tips({
                title: res.message
              })
            }
          })
        }
        //退货退款同意
        if (opt.type == 1) {
          let requestObj = {
            refundOrderNo: that.orderInfo.refundOrderNo,
            auditType: opt.type == 1 ? 'success' : 'refuse',
            merAddressId: opt.merAddressId
          }
          refundOrderAudit(requestObj).then(res => {
            if (res.code == 200) {
              this.$util.Tips({
                title: '操作成功'
              })
              this.init();
              this.change = false
            } else {
              this.$util.Tips({
                title: res.message
              })
            }
          })
        }
      } else if (that.apiModalType == 2) {
        //确认收货
        if (opt.type == 2 && !opt.refuse_reason) {
          return this.$util.Tips({
            title: '请输入拒绝理由'
          })
        }
        if (opt.type == 1) {
          // 同意
          refundReceiving(that.orderInfo.refundOrderNo).then(res => {
            if (res.code == 200) {
              this.$util.Tips({
                title: '操作成功'
              })
              this.init();
              this.change = false
            } else {
              this.$util.Tips({
                title: res.message
              })
            }
          })
        }
        if (opt.type == 2) {
          let requestObj = {
            refundOrderNo: that.orderInfo.refundOrderNo,
            reason: opt.refuse_reason ? opt.refuse_reason : ''
          }
          // 拒绝
          refundReceivingReject(requestObj).then(res => {
            if (res.code == 200) {
              this.$util.Tips({
                title: '操作成功'
              })
              this.init();
              this.change = false
            } else {
              this.$util.Tips({
                title: res.message
              })
            }
          })
        }
      } else {
        data.remark = opt.remark
        if (!data.remark) {
          return this.$util.Tips({
            title: '请输入备注'
          })
        }
        refundOrderMark(data).then(res => {
          if (res.code == 200) {
            this.$util.Tips({
              title: '备注成功'
            })
            this.change = false
          } else {
            this.$util.Tips({
              title: res.message
            })
          }
        })
      }
    },
    toDetail(item) {
      uni.navigateTo({
        url: `/pages/admin/refundOrderDetail/index?refundOrderNo=${item.refundOrderNo}`
      })
    },
    offlinePay: function (item) {
      if (this.openErp) return
      setOfflinePay({
        order_id: item.order_id
      }).then(
          res => {
            this.$util.Tips({
              title: res.msg,
              icon: "success"
            });
            this.init();
          },
          error => {
            this.$util.Tips(error);
          }
      );
    },
    dateChange(val) {
      this.dateType = val;
    },
    payChange(val) {
      this.where.pay_type = val;
    },
    refundChange(val) {
      this.where.isRefund_type = val
    },
    goLogistics(orderInfo) {
      uni.navigateTo({
        url: '/pages/admin/logistics/index?type=refund&orderId=' + orderInfo.order_id
      })
    },
    // 点击确认按钮
    submitBtn() {
      const date = new Date();
      let end = date.toLocaleDateString();
      end = end.replaceAll('/', '-')
      let start = '';
      if (this.dateType == -1) {
        this.where.dateLimit = ''
        this.filterShow = false;
        this.init()
        return
      } else if (this.dateType == 0) {
        date.setDate(1)
      } else if (this.dateType == 1) {
        date.setMonth(date.getMonth() - 2)
        date.setDate(1)
      } else if (this.dateType == 2) {
        date.setMonth(date.getMonth() - 5)
        date.setDate(1)
      }
      start = date.toLocaleDateString();
      start = start.replaceAll('/', '-')
      this.where.dateLimit = start == end ? '' : `${start},${end}`;
      this.filterShow = false;
      this.init()
    },
    //点击重置按钮
    resetBtn() {
      this.where.apply_type = 0;
      this.where.pay_type = 0;
      this.where.isRefund_type = 0
      this.dateType = '-1';
    },
  },
  onReachBottom() {
    this.getIndex()
  }
}
</script>

<style lang="scss" scoped>
.pos-order-list {
  padding-bottom: 150rpx !important;
  padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
  padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
}

.searchCon {
  padding: 10rpx 20rpx;

  .search {
    flex: 1;
    height: 72rpx;
    padding: 0 32rpx;
    border-radius: 36rpx;
    background: #FFFFFF;

    .iconfont {
      margin-right: 16rpx;
      font-size: 32rpx;
      color: #999999;
    }

    .inputs {
      flex: 1;
      font-size: 28rpx;
      color: #333333;
    }

    .placeholder {
      font-size: 26rpx;
      color: #ccc;
      left: 5;
    }
  }

  .btn {
    width: 72rpx;
    height: 72rpx;
    border-radius: 50%;
    margin-left: 20rpx;
    background: #FFFFFF;
    text-align: center;

    .iconfont {
      font-size: 32rpx;
      line-height: 72rpx;
      color: #666666;
    }
  }
}

.pos-order-list .nav {
  padding: 0 20rpx 0 34rpx;
  position: sticky;
  /* #ifdef H5 */
  top: 0rpx !important;
  /* #endif */
  left: 0;
  width: 100%;
  background-color: #F5F5F5;
  z-index: 9;

  .item {
    position: relative;
    padding: 28rpx 0;

    image {
      width: 14rpx;
      height: 14rpx;
      display: block;
      position: absolute;
      bottom: 20rpx;
      right: -4rpx;
    }
  }
}

.pos-order-list .nav .item.on {
  font-weight: 500;
  font-size: 30rpx;
  color: #2A7EFB;
}

.pos-order-list .list {
  padding: 0 20rpx;
}

.pos-order-list .nothing {
  margin-top: 120upx;
  text-align: center;
  color: #cfcfcf;
}

.pos-order-list .list .item {
  padding: 32rpx 24rpx;
  border-radius: 24rpx;
  background-color: #fff;
}

.pos-order-list .list .item ~ .item {
  margin-top: 20rpx;
}

.pos-order-list .list .item .order-num {
  font-size: 28rpx;
  line-height: 40rpx;
  color: #333333;
}

.pos-order-list .list .item .order-num .state {
  color: #FF7E00;
}

.pos-order-list .list .item .order-num .state.on {
  font-size: 24rpx;
  width: 150rpx;
  text-align: right;
}

.pos-order-list .list .item .order-num .time {
  font-size: 26upx;
  font-weight: normal;
  color: #999;
}

.pos-order-list .list .item .operation .more {
  position: relative;
  font-size: 26rpx;
  color: #999999;
}

.pos-order-list .list .item .operation .more .iconfont {
  margin-right: 12rpx;
  font-size: 34rpx;
  color: #2A7EFB;
}

.pos-order-list .list .item .operation .icon-gengduo {
  font-size: 50upx;
  color: #aaa;
}

.pos-order-list .list .item .operation .order .arrow {
  width: 0;
  height: 0;
  border-left: 11upx solid transparent;
  border-right: 11upx solid transparent;
  border-top: 20upx solid #e5e5e5;
  position: absolute;
  left: 15upx;
  bottom: -18upx;
}

.pos-order-list .list .item .operation .order .arrow:before {
  content: '';
  width: 0;
  height: 0;
  border-left: 7upx solid transparent;
  border-right: 7upx solid transparent;
  border-top: 20upx solid #fff;
  position: absolute;
  left: -7upx;
  bottom: 0;
}

.pos-order-list .list .item .operation .order {
  width: 200upx;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 10upx;
  position: absolute;
  top: -100upx;
  z-index: 9;
}

.pos-order-list .list .item .operation .order .items {
  height: 77upx;
  line-height: 77upx;
  text-align: center;
}

.pos-order-list .list .item .operation .order .items ~ .items {
  border-top: 1px solid #f5f5f5;
}

.pos-order-list .list .item .operation .btn {
  height: 56rpx;
  padding: 0 24rpx;
  border-radius: 28rpx;
  border: 1rpx solid #CCCCCC;
  font-size: 24rpx;
  line-height: 54rpx;
  color: #333333;

  &.on {
    color: #FFFFFF !important;
    background-color: #2A7EFB !important;
    border-color: #2A7EFB !important;
  }
}

.pos-order-list .list .item .operation .btn ~ .btn {
  margin-left: 16rpx;
}

.pos-order-list .list .item .operation .wait {
  margin-left: 30rpx;
}

.pos-order-goods .goods {
  padding: 26rpx 0;
}

.pos-order-goods .goods ~ .goods {
  border-top: 1px dashed #e5e5e5;
}

.pos-order-goods .goods .picTxt {
  flex: 1;
  min-width: 0;
}

.pos-order-goods .goods .scroll-view {
  box-sizing: border-box;
  white-space: nowrap;

  .pictrue {
    display: inline-block;

    + .pictrue {
      margin-left: 16rpx;
    }
  }
}

.pos-order-goods .goods .picTxt .pictrue {
  width: 136rpx;
  height: 136rpx;
}

.pos-order-goods .goods .picTxt .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 16rpx;
}

.pos-order-goods .goods .picTxt .text {
  flex: 1;
  min-width: 0;
  padding-left: 20rpx;
}

.pos-order-goods .goods .picTxt .text .info {
  font-size: 28rpx;
  line-height: 40rpx;
  color: #333333;
}

.pos-order-goods .goods .picTxt .text .info .label {
  color: #ff4c3c;
}

.pos-order-goods .goods .picTxt .text .attr {
  margin-top: 12rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 24rpx;
  line-height: 34rpx;
  color: #999999;
}

.pos-order-goods .goods .money {
  padding-left: 16rpx;
  text-align: right;
  font-size: 28upx;
}

.pos-order-goods .goods .money .info {
  margin-top: 18rpx;
  font-size: 24rpx;
}

.pos-order-goods .goods .money .x-money {
  color: #282828;
}

.pos-order-goods .goods .money .num {
  margin-top: 10rpx;
  font-size: 24rpx;
  line-height: 34rpx;
  color: #999999;
}

.pos-order-goods .goods .money .y-money {
  color: #999;
  text-decoration: line-through;
}

.public-total {
  font-size: 28upx;
  color: #282828;
  border-top: 1px solid #eee;
  height: 92upx;
  line-height: 92upx;
  text-align: right;
  padding: 0 30upx;
  background-color: #fff;
}

.public-total .money {
  color: #ff4c3c;
}

.mask {
  z-index: 900;
}

.filter-popup {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
  border-radius: 0 0 32rpx 32rpx;
  background: #FFFFFF;
  transform: translateY(-100%);
  transition: transform 0.3s;

  &.on {
    transform: translateY(0);
  }

  .search-box {
    padding: 10rpx 32rpx;
  }

  .search {
    height: 58rpx;
    padding: 0 32rpx;
    border-radius: 29rpx;
    background: #F5F5F5;
  }

  .iconfont {
    font-size: 28rpx;
    color: #999999;
  }

  .input {
    flex: 1;
    height: 58rpx;
    padding-left: 16rpx;
    font-size: 24rpx;
  }

  .content {
    padding: 32rpx 30rpx 58rpx;

    .bottom {
      display: flex;
      margin-top: 40rpx;

      view {
        width: 332rpx;
        height: 72rpx;
        text-align: center;
        line-height: 72rpx;
        font-weight: 500;
        font-size: 13px;
      }

      .no_view {
        border-radius: 100px 100px 100px 100px;
        border: 1px solid #2A7EFB;
        color: #2A7EFB;
      }

      .yes_view {
        background: #2A7EFB;
        border-radius: 25px 25px 25px 25px;
        color: #FFFFFF;
        margin-left: 22rpx;
      }
    }
  }

  .item {
    margin-top: 36rpx;

    &:first-child {
      margin-top: 0;
    }
  }

  .title {
    font-size: 28rpx;
    line-height: 40rpx;
    color: #333333;
  }

  .list {
    padding: 0;
    margin-right: -24rpx;
  }

  .cell {
    width: 154rpx;
    height: 56rpx;
    border: 1rpx solid #F5F5F5;
    border-radius: 28rpx;
    margin: 24rpx 24rpx 0 0;
    background: #F5F5F5;
    text-align: center;
    font-size: 24rpx;
    line-height: 54rpx;
    color: #333333;

    &.on {
      border-color: #2A7EFB;
      background: #E9F2FE;
      color: #2A7EFB;
    }
  }
}

.scroll_view {
  white-space: nowrap;
  // padding: 0 30rpx;
  .item {
    display: inline-block;
    color: #999999;
    margin-right: 50rpx;
  }
}

.info-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.icon-a-icon_filter1x {
  font-size: 40rpx !important;
}

.list-box {
  margin-top: 20rpx;
}
</style>